<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片生成</title>
    <link rel="icon" href="/xiguadepi.jpeg" type="image/jpeg">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="fullscreen-modal" class="hidden">
        <span class="close-btn">&times;</span>
        <img id="modal-image" src="" alt="全屏预览">
    </div>

    <button id="sidebar-toggle-btn" aria-label="切换模型导航">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
    </button>

    <div id="sidebar">
        <div class="model-selector-container">
            <div class="model-card active" data-model="Qwen/Qwen-Image">Qwen-Image</div>
            <div class="model-card" data-model="MusePublic/489_ckpt_FLUX_1">Flux</div>
            <div class="model-card" data-model="MusePublic/FLUX.1-Kontext-Dev">Kontext</div>
            <div class="model-card" data-model="black-forest-labs/FLUX.1-Krea-dev">Krea</div>
            <div class="model-card" data-model="google/gemini-2.5-flash-image-preview">Gemini-Image-Preview</div>
            <div class="model-card" data-model="Qwen/Qwen-Image-Edit">Qwen-Image-Edit</div>
        </div>
    </div>

    <div id="main-content">
        <button id="theme-toggle-btn" aria-label="切换主题">
            <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
            <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
        </button>

        <h1 class="title">图片生成</h1>

        <div class="main-container">
            <div class="controls-container">
                <div id="openrouter-controls" class="hidden">
                    <div class="api-key-section">
                        <h2>设置 <span class="prompt-remark"></span></h2>
                        <input type="password" id="api-key-input-openrouter" placeholder="输入你的 API 密钥 (必填)">
                    </div>
                    <div class="prompt-section">
                        <h2>输入提示词 <span id="openrouter-prompt-remark" class="prompt-remark"></span></h2>
                        <textarea id="prompt-input-openrouter" placeholder="例如：A cat in a superhero cape, cinematic lighting"></textarea>
                    </div>
                    <div class="upload-section">
                        <h2>上传图片 <span class="prompt-remark">(可选，支持多张)</span></h2>
                        <div id="image-upload-area" class="upload-area">
                            <p>将图片拖拽到这里</p>
                            <span>或点击上传</span>
                            <input type="file" id="image-upload" accept="image/*" multiple>
                        </div>
                        <div id="thumbnails-container"></div>
                    </div>
                    <button class="generate-btn">
                        <span class="btn-text">生成</span>
                        <span class="spinner hidden"></span>
                    </button>
                </div>

                <div id="modelscope-controls">
                    <div class="api-key-section">
                        <h2>设置</h2>
                        <input type="password" id="api-key-input-modelscope" placeholder="请填入 Modelscope 的 API Key">
                    </div>
                    <div class="prompt-section">
                        <h2>正向提示词 <span id="modelscope-prompt-remark" class="prompt-remark"></span></h2>
                        <textarea id="prompt-input-positive" placeholder="例如：A golden cat, masterpiece, best quality"></textarea>
                    </div>
                    <div class="prompt-section">
                        <h2>负向提示词 <span id="modelscope-negative-prompt-remark" class="prompt-remark"></span></h2>
                        <textarea id="prompt-input-negative" placeholder="例如：worst quality, low quality, normal quality"></textarea>
                    </div>
                    <div class="settings-section">
                        <div class="setting-item">
                            <label for="size-select">分辨率</label>
                            <select id="size-select">
                                <option value="1328x1328">1:1 - 1328x1328</option>
                                <option value="1664x928">16:9 - 1664x928</option>
                                <option value="928x1664">9:16 - 928x1664</option>
                                <option value="1472x1140">4:3 - 1472x1140</option>
                                <option value="1140x1472">3:4 - 1140x1472</option>
                                <option value="1584x1056">3:2 - 1584x1056</option>
                                <option value="1056x1584">2:3 - 1056x1584</option>
                            </select>
                        </div>
                        <div class="setting-item">
                            <label for="steps-input">采样步数 <span class="param-note">(范围: 1-100, 默认: 30)</span></label>
                            <input type="number" id="steps-input" value="30" data-min="1" data-max="100">
                            <p class="error-message hidden"></p>
                        </div>
                        <div class="setting-item">
                            <label for="guidance-input">引导系数 <span class="param-note">(范围: 1.5-20, 默认: 3.5)</span></label>
                            <input type="number" id="guidance-input" value="3.5" step="0.1" data-min="1.5" data-max="20">
                            <p class="error-message hidden"></p>
                        </div>
                        <div class="setting-item">
                            <label for="seed-input">随机种子 <span class="param-note">(范围: >= -1, 默认: -1)</span></label>
                            <input type="number" id="seed-input" value="-1" min="-1" data-min="-1">
                            <p class="error-message hidden"></p>
                        </div>
                        <div class="setting-item count-selector">
                            <label>生成数量</label>
                            <div class="count-buttons-container">
                                <button class="count-btn active" data-count="1">1</button>
                                <button class="count-btn" data-count="2">2</button>
                                <button class="count-btn" data-count="3">3</button>
                                <button class="count-btn" data-count="4">4</button>
                            </div>
                        </div>
                    </div>
                     <button class="generate-btn">
                        <span class="btn-text">生成</span>
                        <span class="spinner hidden"></span>
                    </button>
                </div>
            </div>

            <div class="result-container">
                <h2>生成结果</h2>
                <div id="main-result-image">
                    <p>生成的图片将显示在这里</p>
                </div>
                <div id="result-thumbnails"></div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
